<template>
  <el-menu
    :default-active="index"
    class="el-menu-vertical-demo"
    active-text-color="#000000"
    text-color="#9f9e9e"
    @open="handleOpen"
    @close="handleClose"
  >
    <router-link :to="{ path: '/' }">
      <el-menu-item index="1">
        <i class="el-icon-setting">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-zuixin"></use></svg
        ></i>
        <span slot="title">发现音乐</span>
      </el-menu-item>
    </router-link>
    <router-link :to="{ path: '/MV' }">
      <el-menu-item index="2">
        <i class="el-icon-menu"
          ><svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-bofangMV"></use></svg
        ></i>
        <span slot="title">推荐MV</span>
      </el-menu-item>
    </router-link>
    <router-link :to="{ path: '/recommend' }">
      <el-menu-item index="3">
        <i class="el-icon-document"
          ><svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-31paixingbang"></use></svg
        ></i>
        <span slot="title">排行榜</span>
      </el-menu-item>
    </router-link>
    <router-link :to="{ path: '/subCount' }">
      <el-menu-item index="4" @click="duan">
        <i class="el-icon-setting"
          ><svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-gerenzhongxin-gerenxinxi"></use></svg
        ></i>
        <span slot="title">个人中心</span>
      </el-menu-item>
    </router-link>
  </el-menu>
</template>

<script>
import { onMounted } from "@vue/runtime-core";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import "../../../public/font_3743019_fzljx6cqx56/iconfont";
export default {
  data() {
    return {
      index: "1",
    };
  },
  watch: {
    $route(to) {
      if (to.path == "/") {
        this.index = "1";
      } else if (to.path == "/MV") {
        this.index = "2";
      } else if (to.path == "/recommend") {
        this.index = "3";
      } else if (to.path == "/subCount") {
        this.index = "4";
      }
    },
  },
  methods: {
    true: async function () {
      let res = await this.$store.dispatch("status");
      console.log(res);
      if (res == null) {
        ElMessage({
          message: "请先登录",
          grouping: true,
          type: "error",
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
* {
  text-decoration: none;
}
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.el-menu {
  height: 500px;
  .el-menu-item {
    width: 100%;
    text-align: left;
    &:hover {
      background: #c9c9c9;
    }
  }
}
</style>
